import React, { Component } from "react"
import "./style.css"
export class TabControl extends Component {
    constructor() {
        super()
        this.state = {
            isCurTab: 0,
        }
    }

    itemClick(index) {
        this.setState({
            isCurTab: index,
        })
        this.props.tabIndexChange(index)
    }

    render() {
        const { isCurTab } = this.state
        const { titles, itemType } = this.props

        return (
            <div className="tab-control">
                {titles.map((item, index) => {
                    return (
                        <div
                            className={isCurTab === index ? "item active" : "item"}
                            key={item}
                            onClick={() => this.itemClick(index)}
                        >
                            {/* <span className="text">{item}</span> */}
                            {itemType(item)}
                        </div>
                    )
                })}
            </div>
        )
    }
}

export default TabControl
